import React, { useState, useMemo } from 'react'

type ChildProps = {
  click: () => void
  count: { age: number }
}

const Child = ({ click, count }: ChildProps) => {
  console.log('Child1 组件更新')
  return (
    <div style={{ backgroundColor: 'lightsalmon', padding: 5 }}>
      子组件1：<button onClick={click}>点击</button>
      <p>{count.age}</p>
    </div>
  )
}

const App = () => {
  const [count, setCount] = useState(0)
  const [theme, setTheme] = useState('lightseagreen')

  const handleClick = useMemo(() => {
    console.log('依赖 count 数据')
    return () => {
      setCount(count + 10)
    }
  }, [count])

  // useMemo Hook 可以记忆任意数据
  // 因此，可以通过 useMemo Hook 来记忆 React 组件，模拟 React.memo 高阶组件的功能
  // 组件只会在依赖项 count 改变时重新渲染，否则，会直接复用上一次 useMemo 记忆的结果
  // 返回值表示 组件，该组件直接使用 JSX 渲染即可
  // JSX 最终会转化为 JS 对象，所以可以将 React 组件存储到变量中通过 {} 来使用
  const ChildComponent = useMemo(
    () => <Child click={handleClick} count={{ age: count }}></Child>,
    [handleClick, count]
  )

  return (
    <div style={{ backgroundColor: theme, padding: 10 }}>
      <button
        onClick={() => setTheme(theme === 'lightseagreen' ? 'lightskyblue' : 'lightseagreen')}
      >
        切换主题
      </button>

      <h1>计数器：{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>

      <hr />

      {/* 子组件 */}
      {ChildComponent}
    </div>
  )
}

export default App
